const path = require('path');
const baseWebpackConfig = require('./webpack.base.config')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require("webpack-merge");
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const SizePlugin = require('size-plugin');


module.exports = webpackMerge(baseWebpackConfig, {
    devtool: 'cheap-module-eval-source-map',
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, '../dist/index.html'),
            template: "./src/index.html"
        }),
        // new BundleAnalyzerPlugin({ analyzerPort: 7778 }),
        new webpack.HotModuleReplacementPlugin(),
        new SpeedMeasurePlugin(),
        new SizePlugin()
    ],
    devServer: {
        historyApiFallback: true,
        hot: true,
        contentBase: false,
        compress: true,
        port: "8000",
        publicPath: '/',
        proxy: {

        }
    },
    module:{
        rules: [
            {
                test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ],
            },
        ]
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].js',
        publicPath: "/"
    },
})
